<%@page pageEncoding="UTF-8" %>
<%@ include file="../include/header.jsp" %>
<body>
<div id="app" v-cloak>
    <!--条件查询 -->
    <div class="toolbar2">
        <el-form :inline="true" :model="filters" label-position="top" size="small">
            <div style="margin-left: 16px;position: relative;">
                <el-form-item label="区域名称">
                    <el-input v-model="filters.searchStr" placeholder="区域名称" clearable></el-input>
                </el-form-item>
                <el-form-item   label="区域"  v-if="false" prop="indexCode">
                    <el-select v-model="districtsSel" clearable filterable placeholder="请选择"
                               @change="currentSel">
                        <el-option v-for="item in districts" :key="item.indexCode" :label="item.name"
                                   :value="{indexCode:item.indexCode,treeCode:item.treeCode}"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label=" ">
                    <el-button type="primary" @click="loadData" class="sbtn">查询</el-button>
                </el-form-item>
            </div>
        </el-form>
    </div>

    <div style="position: relative">
        <el-table :data="tableData" border stripe v-loading="loading" :height="tableH" ref="table">
            <el-table-column prop="name" label="区域名称" min-width="100"></el-table-column>
            <el-table-column prop="regionPath" label="区域完整路径" min-width="100"></el-table-column>
            <el-table-column prop="indexCode" label="indexCode" min-width="100"></el-table-column>
            <el-table-column label="操作" width="250">
                <template scope="scope" style="margin-left: 25px;">
                    <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">监控点</el-button>

                </template>
            </el-table-column>
        </el-table>
    </div>

    <!--编辑界面-->
    <el-dialog title="监控点" :visible.sync="selFromVisible" :close-on-click-modal="false" @open="handleOpen"
               @close="handleClose"
               height="600px"
               width="800px">
        <el-table :data="cameraDatas" border stripe v-loading="loading" :height="tableH" ref="table">
            <el-table-column prop="channelNo" label="通道编号" min-width="50"></el-table-column>
            <el-table-column prop="cameraName" label="监控名称" min-width="100"></el-table-column>
            <el-table-column prop="createTime" label="添加时间" min-width="100"></el-table-column>
            <el-table-column label="操作" width="120">
                <template scope="scope" style="margin-left: 25px;">
                    <el-button type="" size="small" @click="handlePreview(scope.$index, scope.row)">预览</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</div>
</body>
<script>
    $(window).resize(function () {
        app.tableH = $(window).height() - 155;
    });
    var app = new Vue({
            el: '#app',
            data: {
                isMobile: '${isMobile}',
                tableH: $(window).height() - 155,
                loading: false,
                filters: {
                    searchStr: '',
                    parentIndexCode: '',
                    treeCode: ''
                },
                districtsSel: {
                    name: "",
                    indexCode: "",
                    treeCode: ""
                },
                selFromVisible: false,
                editLoading: false,
                selFrom: {},
                tableData: [],
                districts: [],
                cameraDatas: []
            },
            created: function () {
                this.loadData();
                this.loadDistricts();
            },
            methods: {
                loadData: function () {
                    this.loading = true;
                    var data = Object.assign({
                        state: 1
                    }, this.filters);
                    $.ajax({
                        url: "${ctx}/backstage/hikorigin/query",
                        data: data,
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.tableData = returndata.data;
                            } else {
                                app.tableData = [];
                                app.$notify.error({
                                    title: '错误',
                                    message: returndata.errors.message
                                });
                            }
                            app.loading = false;
                        }
                    });
                },
                loadDistricts: function () {
                    $.ajax({
                        url: "${ctx}/backstage/hikorigin/districtList",
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.districts = returndata.data;
                            } else {
                                app.districts = [];
                                app.$notify.error({
                                    title: '错误',
                                    message: returndata.errors.message
                                });
                            }
                        }
                    });
                },
                handleSearch: function () {
                    this.loadData();
                }
                ,
                handleClose: function () {
                    this.editLoading = false;
                }
                ,
                handleOpen: function () {
                    if (this.$refs.selFrom) {
                        this.$refs.selFrom.resetFields();
                    }
                },

                handleEdit: function (index, row) {
                    this.selFrom = Object.assign({districts: []}, row);
                    this.selFromVisible = true;
                    this.loadCameraDatas();
                },
                handlePreview: function (index, row) {
                    app.$notify.error({
                        title: '暂未实现',
                        message: returndata.errors.message
                    });
                },
                currentSel(selVal) {
                    app.districtsSel = selVal;
                    app.filters.parentIndexCode = selVal.indexCode;
                    app.filters.treeCode = selVal.treeCode;
                },

                loadCameraDatas: function () {
                    let requesData = {
                        pageNo: 1,
                        pageSize: 100,
                        regionIndexCode: app.selFrom.indexCode,
                        treeCode: app.selFrom.treeCode
                    };
                    $.ajax({
                        url: "${ctx}/backstage/hikorigin/cameras",
                        data: requesData,
                        dataType: 'json',
                        success: function (returndata) {
                            if (returndata.success) {
                                app.cameraDatas = returndata.data;
                            } else {
                                app.cameraDatas = [];
                                app.$notify.error({
                                    title: '错误',
                                    message: returndata.errors.message
                                });
                            }
                        }
                    });
                }
            }
        })
    ;
</script>
